<template>
    <div>
      <mc-layout></mc-layout>
      <!--左右布局-->
      <div class="mc-layout-l-r">
        <div class="mc-layout-l">
          <span>您好</span>
        </div>
        <div class="mc-layout-r">
          <span>您好</span>
          <span>您好</span>
          <span>您好</span>
        </div>
      </div>
      <!--九宫格-->
      <div class="mc-layout-9">
        <div class="mc-layout-l">
          <span>您好</span>
        </div>
        <div class="mc-layout-r">
          <span>您好</span>
          <span>您好</span>
          <span>您好</span>
        </div>
      </div>
      <div class="mc-layout-9" style="flex-flow: row wrap; display: flex;">
        <div class="mc-layout-9-item" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
        <div class="mc-div-pane" style="width: 33.3%; height: 33.3%; box-sizing: border-box;"></div>
      </div>
    </div>
</template>

<script>
import McLayout from "./components/McLayout";
export default {
    data(){
        return {

		    }
    },
    created(){
    },
    components:{
      McLayout,
    },
    methods : {
      print(){
        console.log(this)
      },
      change(){
//          this.tab="2";
      }
    },
    mounted(){
    }
}
</script>

<style>
div{
  border:1px grey solid;
}
</style>
